<template>
    <div>
      <el-tag closable type="primary" effect="dark"
        style="border-radius: 0px; padding: 12px 10px; cursor: pointer; margin: 3px 0 3px 20px;">
        <span style="background-color: white; border-radius: 50%; width: 8px; height: 8px; display: inline-block;"></span>
        <span style="padding-left: 5px;">咨询师等级表</span>
      </el-tag>
    </div>
    <div class="about">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="根据">
            <el-input v-model="formInline.name" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="系统模块">
                <el-select
                    v-model="formInline.state"
                    placeholder="Activity zone"
                    style="width: 190px;"
                    clearable
                >
                    <el-option label="正常" value="nomal" />
                    <el-option label="停用" value="stop" />
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
            <el-date-picker
                v-model="formInline.date"
                type="date"
                placeholder="Pick a date"
                clearable
            />
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="mb20">
            <el-button @click="onAdd" type="primary" icon="Plus" plain>新增</el-button>
            <el-button type="danger" icon="Delete" plain>删除</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column fixed prop="id" label="编号" width="150" />
            <el-table-column prop="name" label="标题" width="120" />
            <el-table-column prop="author" label="作者" width="120" />
            <el-table-column prop="readNum" label="阅读量" width="120" />
            <el-table-column prop="imageUrl" label="图片地址" width="120" />
            <el-table-column prop="createTime" label="创建时间" width="120" />
            <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="onEdit(scope.row)">修改</el-button>
                    <el-button link type="primary" @click="onDel(scope.row)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    
    <!-- 添加，编辑弹框 -->
    <el-dialog
        v-model="showPop"
        :title="isEdit?'编辑':'添加'"
      >
        <LogAddCom v-if="showPop" @onCancel="onCancel" :dicid="dicid" :isEdit="isEdit"  />
      </el-dialog>
      <el-pagination
          v-model:current-page="queryInfo.pageNum"
          v-model:page-size="queryInfo.pageSize"
          :page-sizes="[1, 5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
    </template>
    <script setup>
    import { onMounted, reactive,ref } from 'vue'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import LogAddCom from './LogAddCom.vue'
    import axios from 'axios';
    
    // 定义一个方法当页面加载后立马执行的代码
    onMounted(()=>{
        // console.log('onMounted');
        getList();
    })
    // 定义一个全局的查询参数变量
    const queryInfo = ref({
        pageNum:1,
        pageSize:5
        // name:'',
        // author:''
    })
    
    const total=ref(0)
    
    
    //定义一个方法，来动态的调用后端接口，获取文章列表
    const getList = ()=>{
        // 使用axios调用后端接口获取数据
        axios.get(
            '/article/selectAll',{
            params: queryInfo.value
        }
    )
        .then(resp=>{
            // console.log(resp.data)
            let result =  resp.data;
            if(result.code==1){
                tableData.value=result.data.list; 
                total.value=result.data.total;
                console.log(tableData.value);
                   
            }else{
                console.log('获取文章列表失败')
            }
        })
        
    }
    
    const handleSizeChange = (val) => {
        queryInfo.value.pageSize=val;
        queryInfo.value.pageNum=1;
        getList();
    }
    const handleCurrentChange = (val) => {
        queryInfo.value.pageNum=val;
        getList();
    }
    const formInline = reactive({
        name: '',
        state: '',
        date: '',
    })
    
    // 删除
    const onDel = row=>{
        ElMessageBox.confirm(
            '真的要删除吗？',
            '提示',
            {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            }
        )
        .then(() => {
            ElMessage({
            message: '删除成功！',
            type: 'success',
          })
        })
        .catch(() => {})
    }
    // 弹框
    const showPop = ref(false);
    // 默认添加
    const isEdit = ref(false);
    const dicid = ref(0);
    // 添加
    const onAdd = row=>{
        // 展示弹框
        showPop.value = true;
        isEdit.value = false;
    }
    // 编辑
    const onEdit = row=>{
        // console.log('row',row,row.id);
        // 展示弹框
        showPop.value = true;
        isEdit.value = true;
        // 更新id
        dicid.value = row.id;
    }
    // 弹框关闭
    const onCancel = ()=>{
        // 展示弹框
        showPop.value = false;
    }
    
    
    
    const onSubmit = () => {
      console.log('submit!')
    }
    const tableData = ref([])
    </script>
      <style scoped>
      </style>
      